<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @close="$emit('update:visible', false)"
    width="50%"
    custom-class="ai-discouragement-detail-dialog"
    append-to-body
  >
    <div class="chat-container" ref="messageList">
      <div
        class="message"
        v-for="(msg, index) in dialogData"
        :key="index"
        :class="msg.talkType === 1 ? 'user' : 'admin'"
      >
        <div class="avatar">
          <img src="./img/avatar.png" />
        </div>
        <div class="message-content">
          <div class="message-body">
            <div class="speech-icon" v-if="msg.isSpeech">
              <i class="icon-voice"></i>
            </div>
            <p v-html="highlightRiskWords(msg)"></p>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ChatDetailDialog',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '对话详情'
    },
    dialogData: {
      type: Array,
      default: () => []
    },
    riskKeyword: {
      type: String, // 示例：'诈骗,违法,违规'
      default: ''
    }
  },
  methods: {
    highlightRiskWords(msg) {
      const riskKeyword = this.riskKeyword; // 示例，实际你可以从data或props传入
      const keywords = riskKeyword.split(',').filter(k => k);
      let content = msg.talkContent || '';

      if (msg.talkType === 1 && keywords.length) {
        keywords.forEach(kw => {
          const pattern = new RegExp(`(${kw})`, 'gi');
          content = content.replace(pattern, '<span style="color:rgb(254, 108, 111);">$1</span>');
        });
      }
      return content;
    },
  }
};
</script>

<style lang="stylus">
.ai-discouragement-detail-dialog{
    &.el-dialog{
      background: rgba(26,94,109,0.69);
      .el-dialog__title,
      .el-dialog__body{
        color: #fff;
      }
      .el-dialog__header{
        padding-bottom: 0;
      }
      .el-dialog__body{
        padding-top: 0;
        .chat-container{
          display: flex;
          flex-direction: column;
          margin: 20px;
          height: 400px;
          overflow: auto;
          .message{
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
            width: 100%;

            .message-line{
              position: relative;
              width: 100%;
              text-align: center;
              color: #d6fdfc;
              font-size: 13px;
              &::before,
              &::after{
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 40%;
                background: rgba(107, 230, 200, 0.22);
                height: 1px;
              }
              &::before{
                left: 0;
              }
              &::after{
                right: 0;
              }
            }
            
            &.user{
              justify-content: flex-end;
              .avatar{
                order: 2
                margin-left: 20px;
              }
              .message-content{
                order: 1;
                &::after{
                  right: -20px;
                  border-right: 10px solid transparent;
                  border-left: 10px solid #255C63;
                }
              }
            }

            &.admin{
              justify-content: flex-start
              .avatar{
                order: 1;
                margin-right: 20px;
              }
              .message-content{
                order: 2
                &::after{
                  left: -20px;
                  border-left: 10px solid transparent;
                  border-right: 10px solid #255C63;
                }
              }
            }

            .avatar{
              width: 30px;
              height: 30px;
              border-radius: 50%;
              img{
                border-radius: 50%;
                width: 100%;
              }
            }
          }

          .message-content{
            max-width: 400px;
            padding: 10px;
            border-radius: 2px;
            background-color: #255C63
            position: relative;
            font-size: 16px;
            line-height: 22px;
            color: #fff;
            opacity: 0.8;

            &::after{
              content: '';
              position: absolute;
              width: 0;
              height: 0;
              border-top: 10px solid transparent;
              border-bottom: 10px solid transparent;
              top: 10px;
            }
        
            .message-header{
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: #bbb;
            }
              
            .message-body{
              display: flex;
              align-items: center;
              font-size: 14px;
            }
            .speech-icon{
              margin-right: 10px;
              font-size: 18px;
              color: #00bcd4;
            }
          }
        }
      }
      .el-dialog__headerbtn .el-dialog__close{
        color: #fff;
      }
    }
  }
</style>
